<kd-card role="table">
    <div title >Git Repository Manage</div>
    <div content>
      <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->
        <!-- Position Column -->
        <ng-container matColumnDef="id">
          <div>
            <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
            <mat-cell *matCellDef=" let element">
              &nbsp;{{element.id}} </mat-cell>
          </div>
        </ng-container>
  
        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
          <mat-cell *matCellDef="let element">
         
              <button mat-button color="primary" (click) ="GetSubModule(element.id)">

                {{element.name}} 
          </button>
   
          </mat-cell>
        </ng-container>
  
        <!-- Weight Column -->
        <ng-container matColumnDef="url">
          <mat-header-cell *matHeaderCellDef> Url </mat-header-cell>
          <mat-cell *matCellDef="let element"><a [href]="element.url" target="_blank">{{element.url}}</a> </mat-cell>
        </ng-container>
  
        <!-- Weight Column -->
        <ng-container matColumnDef="path">
          <mat-header-cell *matHeaderCellDef> Path </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.path}} </mat-cell>
        </ng-container>
  
        <!-- Symbol Column -->
        <ng-container matColumnDef="authid">
          <mat-header-cell *matHeaderCellDef> authid </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.authid}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="status">
          <mat-header-cell *matHeaderCellDef> status </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.status}} </mat-cell>
        </ng-container>
  
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
      </mat-table>
    </div>  
</kd-card>  


<kd-card role="table">
  <div title>
    <span>Config Dockerfile for each SubModule </span>
    <button mat-flat-button color="warn" (click)="CreateOrUpdateDockerfile()">Update Dockerfile</button>
    <button mat-flat-button color="warn" (click)="AutoGenerationDockerfile()">Auto Generate Dockerfile</button>
  </div>
  <div content>
    <div fxLayout="column" fxFill>
      <div fxLayout fxFlex>
        <div class="one" fxFlex="20" fxLayoutAlign="center center">
          <mat-list role="list">
            <cdk-virtual-scroll-viewport appendOnly itemSize="50" class="example-viewport">
              <div *cdkVirtualFor="let item of _modules;let i = index" class="example-item">
                <mat-list-item role="listitem">                 
                  <div *ngIf="i==select_i; else elseBlock">
                    <button mat-button color="warn" (click)="ChangeModule(i)"><mat-icon matListItemIcon>folder</mat-icon>#{{item.name}}</button>
                  </div>
                  <ng-template #elseBlock>
                    <button mat-raised-button color="warn"  (click)="ChangeModule(i)"><mat-icon matListItemIcon>folder</mat-icon>#{{item.name}}
                    </button>
                  </ng-template> 
  
                </mat-list-item>
              </div>
            </cdk-virtual-scroll-viewport>
          
          </mat-list>
        </div>

          <ngx-monaco-editor  fxFlex="80" fxLayoutAlign="center center" style="height: 600px" [options]="options" [(ngModel)]="code"></ngx-monaco-editor>
   
      </div>
    </div>
  </div>
</kd-card>